<template>
    <div class="phone-verification">
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_select weui-cell_select-before">
                <div class="weui-cell__hd">
                    <select class="weui-select" name="select2">
                        <option value="1">+86</option>
                        <option value="2">+80</option>
                        <option value="3">+84</option>
                        <option value="4">+87</option>
                    </select>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="tel" pattern="[0-9]*" v-model="phoneObj" placeholder="请输入号码">
                </div>
            </div>

            <div class="weui-cell weui-cell_vcode">
                <div class="weui-cell__bd">
                    <input class="weui-input" type="number" pattern="[0-9]*" v-model="code" placeholder="请输入验证码">
                </div>
                <div class="weui-cell__ft">
                    <button :disabled="fetchCodeMsg || false" class="weui-vcode-btn" :class="{disabled : fetchCodeMsg}" @click="getCheckNumber()">{{timerCodeMsg||'获取验证码'}}</button>
                </div>
            </div>

        </div>
        <div class="weui-btn-area">
            <a class="weui-btn weui-btn_primary" @click="checkCode" :class="{'weui-btn_disabled' : !code}" id="showTooltips">确认</a>
        </div>
    </div>
</template>

<script>
export default {
    name: "phoneVerification",
    data() {
        return {
            phoneObj: '',
            timerCodeMsg: '',
            fetchCodeMsg: '',
            code: '',
            pass: false
        }
    },
    methods: {
        getCheckNumber() {
            var newPhone = this.phoneObj
            if (!(/^1[34578]\d{9}$/.test(newPhone))) {
                weui.toast('手机号码有误，请重填', 3000);
                return false
            } else {
                axios.post('/public/sendSms', {
                    phone: newPhone
                }).then(res => {
                    weui.toast(res.data.message, 2000);
                    if (res.data.status === 'success') {
                        var sec = 60
                        for (var i = 0; i <= 60; i++) {
                            window.setTimeout(() => {
                                if (sec != 0) {
                                    this.timerCodeMsg = sec + '秒后重发'
                                    this.fetchCodeMsg = true
                                    sec--
                                } else {
                                    sec = 60 // 如果倒计时结束就让  获取验证码显示出来
                                    this.timerCodeMsg = '重新发送'
                                    this.fetchCodeMsg = false
                                }
                            }, i * 1000)
                        }
                    } else {
                        console.log('发送失败');
                    }
                })
            }
        },
        checkCode() {
            if(!this.code || !this.phoneObj) {
                weui.toast('请输入手机号码、验证码', 3000);
                return false;
            }
            axios.post('/public/verification', {
                phone: this.phoneObj,
                code: this.code
            }).then(res => {
                if (res.data.status === 'success') {
                    setTimeout(() => {
                        window.location.href = res.data.data;
                    }, 500);
                } else {
                    weui.toast(res.data.message, 2000);
                }
            })
        }
    }
}
</script>
